<template>
  <div class="container_warp">
    <div class="search_wrap">
      <d-button class="btn-backnews" @click="handleBack">
        <GIcon name="gt-line-return" color="var(--theme-text)"/>
        {{ $t('common.back') }}
      </d-button>
      <d-search v-model="search" icon-position="left" :placeholder="$t('common.search')" @keypress.enter="handleConfirm" class="search-input" />
    </div>
    <div class="result_wrap">
      <div class="header_wrap">
        <div :style="{ color: activeName === 'article' ? '#000000' : '' }" class="text_count_wrap mr-[16px]"
          @click="changeTab('article')">
          <strong>{{ $t('common.articleTab') }}</strong>
          <span>{{ articleList.length }}</span>
        </div>
        <div :style="{ color: activeName === 'activity' ? '#000000' : '' }" class="text_count_wrap mr-[16px]"
          @click="changeTab('activity')">
          <strong>{{ $t('common.activityTab') }}</strong>
          <span>{{ activityLive.length }}</span>
        </div>
        <div :style="{ color: activeName === 'course' ? '#000000' : '' }" class="text_count_wrap"
          @click="changeTab('course')">
          <strong>{{ $t('common.courseTab') }}</strong>
          <span>{{ courseList.length }}</span>
        </div>
      </div>

      <div class="content_wrap" v-show="activeName === 'article'">
        <template v-for="item in articlePageList" :key="item.id">
          <GLink :to="`/news/${item.id}`"  target="_blank">
            <Card :tab="activeName" :data="item" />
          </GLink>
        </template>
      </div>
      <div class="content_wrap" v-show="activeName === 'activity'">
        <template v-for="item in activityLivePageList" :key="item.id">
          <GLink :to="`/activity/${item.id}`" target="_blank">
            <Card :tab="activeName" :data="item" />
          </GLink>
        </template>
      </div>
      <div class="content_wrap" v-show="activeName === 'course'">
        <template v-for="item in coursePageList" :key="item.id">
          <GLink :to="`/course/${item.id}`" target="_blank">
            <Card :tab="activeName" :data="item" />
          </GLink>
        </template>
      </div>
      <EmptyData
        v-show="activeName === 'activity' && !activityLive.length || activeName === 'article' && !articleList.length"
        :hide-icon="false" class="h-full flex-1" />

      <div class="pagination_wrap"
        v-show="activeName === 'activity' && activityLive.length || activeName === 'article' && articleList.length || activeName === 'course' && courseList.length">
        <d-pagination size="sm" @page-index-change="pageChange" :total="pager.total" v-model:pageSize="pager.pageSize"
          v-model:pageIndex="pager.pageIndex" :can-view-total="true" :show-true-page-index="false"
          :can-jump-page="false" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Card from './components/Card.vue'
import type { IResult, ILink, LinkKeys } from './types/index'
import allNewsData from '../Data/news.json'
import allActivityData from '../Data/activity.json'
import allCourseData from '../Data/course.json'
import { useI18n } from 'vue-i18n';
import GIcon from '~/components/GIcon/index.vue'
const { t } = useI18n()
// 获取cookie里参数
const lan = useCookie('lang').value || 'zh';
let newsData = allNewsData[lan] || allNewsData.zh;
let activityData = allActivityData[lan] || allActivityData.zh;
let courseData = allCourseData[lan] || allCourseData.zh;
const router = useRouter()
const search = ref<string>(router.currentRoute.value?.query.search as string || '')
const articleList = ref<Array<IResult>>([]) // 文章列表
const activityLive = ref<Array<any>>([]) // 活动列表
const activeName = ref<LinkKeys>(router.currentRoute.value?.query.tab as LinkKeys || 'article')
const articlePageList = ref<Array<IResult>>([]) // 文章分页列表
const activityLivePageList = ref<Array<IResult>>([]) // 文章分页列表
const courseList = ref<Array<IResult>>([]) // 课程列表
const coursePageList = ref<Array<IResult>>([]) // 课程分页列表


const pager = ref({
  total: 0,
  pageIndex: 1,
  pageSize: 10,
  pageSizeOptions: [10, 20, 30, 40, 50],
});


// 点击tab栏目
function changeTab(tab: LinkKeys) {
  activeName.value = tab
  const linkObj: ILink = {
    'article': articleList.value.length,
    'activity': activityLive.value.length,
    'course': courseList.value.length
  }
  pager.value.total = linkObj[tab]
}

function handleConfirm() {
  getActivityLiveData()
  getArticleListData()
  getCourseListData()
}

function getCourseListData() {
  courseList.value = Object.values(courseData).flat() as Array<IResult>// 获取所有的文章列表
  if (search.value) {
    let data = courseList.value.filter((res) => res.title?.toLowerCase().includes(search.value.toLowerCase()))
    coursePageList.value = data.slice(0, 10)
    courseList.value = data
  } else {
    coursePageList.value = courseList.value.slice(0, 10)
    courseList.value = courseList.value 
  }
  if(activeName.value === 'course'){
    pager.value.total = courseList.value.length
  }
}

// 获取所有的文章列表包括未被收录的
function getArticleListData() {
  articleList.value = Object.values(newsData).flat() as Array<IResult>// 获取所有的文章列表
  if (search.value) {
    let data = articleList.value.filter((res) => res.title?.toLowerCase().includes(search.value.toLowerCase()))
    articlePageList.value = data.slice(0, 10)
    articleList.value = data
  } else {
    articlePageList.value = articleList.value.slice(0, 10)
    articleList.value = articleList.value
  }
  if(activeName.value === 'article'){
    pager.value.total = articleList.value.length
  }
}

// 获取所有的文章列表包括未被收录的
function getActivityLiveData() {
  activityLive.value = Object.values(activityData).flat() // 获取所有的文章列表
  if (search.value) {
    let data = activityLive.value.filter((res) => res.title?.toLowerCase().includes(search.value.toLowerCase()))
    activityLivePageList.value = data.slice(0, 10)
    activityLive.value = data
  } else {
    activityLivePageList.value = activityLive.value.slice(0, 10)
    activityLive.value = activityLive.value
  }
  if(activeName.value === 'activity'){
    pager.value.total = activityLive.value.length
  }
}

//分页函数
function pageChange(index: number) {
  if (activeName.value === 'article') {
    articlePageList.value = articleList.value.slice((index - 1) * 10, index * 10)
  } else if (activeName.value === 'activity') {
    activityLivePageList.value = activityLive.value.slice((index - 1) * 10, index * 10)
  } else if (activeName.value === 'course') {
    coursePageList.value = courseList.value.slice((index - 1) * 10, index * 10)
  }
}

function handleBack() {
  const { nav = '', tab } = router.currentRoute.value?.query
  if (tab === 'activity') {//从活动页面跳转过来
    router.push('/activity')
  } else if (tab === 'article') {//从搜索前沿资讯跳转过来
    router.push('/news', { query: { nav } })
  } else if (tab === 'course') {//从课程页面跳转过来
    router.push('/course')
  } else {//默认活动
    router.push('/activity')
  }
}

getActivityLiveData()
getArticleListData()
getCourseListData()
useSeoMeta({
  charset: 'utf-8',
  title: () => `${search.value} ${t('search.tdk.title')}`,
  ogTitle: () => `${search.value} ${t('search.tdk.title')}`,
  description: () => '',
  ogDescription: () => '',
  keywords: () => '',
  ogKeywords: () => ''
})
</script>

<style scoped lang="scss">
.pagination_wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.container_warp {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 32px;
  @media screen and (max-width: 768px) {
    padding: 16px;
  }

  .search_wrap {
    width: 100%;
    margin: 0px auto 20px;
    display: flex;
    align-items: center;
    gap: 16px;

    .btn-backnews {
      padding-left: 16px;
      padding-right: 16px;
      color: var(--theme-text);
    }

    .search-input {
      flex: 1;
      :deep(.devui-input){
        border-color: var(--theme-line-border);
      }
    }
  }

  .header_wrap {
    display: flex;
    align-items: center;
    padding: 16px;
    width: 100%;
    background: #F9F9FB;
    border: 1px solid #E3E3EE;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    .text_count_wrap:first-child {
        margin-right: 20px;
      }
    .text_count_wrap {
    
      cursor: pointer;
      color: #9C9DB4;

      span {
        color: #3B3E55;
        background: #E3E3EE;
        margin-left: 8px;
        text-align: center;
        padding: 0 4px;
        border-radius: 4px;
      }
    }
  }
}


@media screen and (max-width: 768px) {
  .container_warp {
    .header_wrap {
      padding: 10px;
      .text_count_wrap {
        margin: 0 10px;
      }
    }
  }

}
</style>
